其他
网站都变成灰色，有哪些方法可以快速实现？
推荐关注
扫码关注“后端架构师”，选择“星标”公众号
重磅干货，第一时间送达！
责编：架构君 | 来源：blog.csdn.net/YOUYOU0710/article/details/105350655
责编：架构君 | 来源：blog.csdn.net/YOUYOU0710/article/details/105350655
上一篇好文：仅需一分钟，就可以安装部署一套您自己的堡垒机系统！
大家好，我是后端架构师。
方法一 方法二 最后
有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。
当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。
其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：
使这个网页的颜色变成灰色的最简单的方法，就是在当前页面的css里面。添加下面的代码，并且让他在任意的浏览器里面正确的执行：
方法一
<style type="text/css">html { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter:grayscale(1)}</style>
filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同罢了。
方法二
下面这段代码可以把网页变为黑白，将代码加到 CSS 最顶端就可以实现素装，如果网站没有使用 CSS，可以在网页/模板的 HTML 代码和 之间插入：
<style> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);}</style>
有一些网站可能使用这个 css 不能生效，是因为网站没有使用最新的网页标准协议，请将网页最头部的替换为以下代码：另外，搜索公众号Linux就该这样学后台回复“电子书”，获取一份惊喜礼包。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
还有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制，可以在 FLASH 代码的和之间插入：
<param value="false" name="menu"/><param value="opaque" name="wmode"/>
最后
给出一段规范的代码，把这段代码加入到网站页面的css里面即可实现页面变成灰色的效果：
html{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}
欢迎有需要的同学试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️
上一篇好文：仅需一分钟，就可以安装部署一套您自己的堡垒机系统！
大家好，我是后端架构师。
方法一 方法二 最后
有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。
当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。
使这个网页的颜色变成灰色的最简单的方法，就是在当前页面的css里面。添加下面的代码，并且让他在任意的浏览器里面正确的执行：
方法一
<style type="text/css">html { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter:grayscale(1)}</style>filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同罢了。
方法二
下面这段代码可以把网页变为黑白，将代码加到 CSS 最顶端就可以实现素装，如果网站没有使用 CSS，可以在网页/模板的 HTML 代码和 之间插入：
<style> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);}</style>有一些网站可能使用这个 css 不能生效，是因为网站没有使用最新的网页标准协议，请将网页最头部的替换为以下代码：另外，搜索公众号Linux就该这样学后台回复“电子书”，获取一份惊喜礼包。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><param value="false" name="menu"/><param value="opaque" name="wmode"/>最后
给出一段规范的代码，把这段代码加入到网站页面的css里面即可实现页面变成灰色的效果：
html{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}在 GitHub猿 还有更多优质项目系统学习资源，欢迎分享给其他同学吧！
PS：如果觉得我的分享不错，欢迎大家随手点赞、转发、在看。
最后给读者整理了一份BAT大厂面试真题，需要的可扫码加微信备注：“面试”获取。
在 GitHub猿 还有更多优质项目系统学习资源，欢迎分享给其他同学吧！
PS：如果觉得我的分享不错，欢迎大家随手点赞、转发、在看。
最后给读者整理了一份BAT大厂面试真题，需要的可扫码加微信备注：“面试”获取。
版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢!
版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢!
END
最近面试BAT，整理一份面试资料《Java面试BAT通关手册》，覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。在这里，我为大家准备了一份2021年最新最全BAT等大厂Java面试经验总结。
别找了，想获取史上最全的Java大厂面试题学习资料
扫下方二维码回复「面试」就好了
历史好文：
基于SpringBoot 的CMS系统，拿去开发企业官网真香
快速搭建自己的物联网平台，支持数据流转、数据可视化、报警中心等模块！
世界上最快的内存数据库横空出世，比 Redis 快 25 倍，Star 数飙升，杀疯了！
马斯克认错：裁掉他们是我最大的错误，但黑粉们却没能笑太久...
Spring Boot+JWT+Shiro+MyBatisPlus 实现 RESTful 快速开发后端脚手架！
一款分布式敏捷开发系统，支持服务治理、监控和追踪，适合中小型企业开发解决方案！
扫码关注“后端架构师”，选择“星标”公众号
别找了，想获取史上最全的Java大厂面试题学习资料
扫下方二维码回复「面试」就好了
历史好文：
基于SpringBoot 的CMS系统，拿去开发企业官网真香
快速搭建自己的物联网平台，支持数据流转、数据可视化、报警中心等模块！
世界上最快的内存数据库横空出世，比 Redis 快 25 倍，Star 数飙升，杀疯了！
马斯克认错：裁掉他们是我最大的错误，但黑粉们却没能笑太久...
Spring Boot+JWT+Shiro+MyBatisPlus 实现 RESTful 快速开发后端脚手架！
一款分布式敏捷开发系统，支持服务治理、监控和追踪，适合中小型企业开发解决方案！
扫码关注“后端架构师”，选择“星标”公众号